.chat-index {
  width: 100%;
  height: 100%;

  .chat-row {
    position: relative;
    width: 100%;
    height: 100%;

    .chat-col {
      height: 100%;

      > * {
        width: 100%;
        height: 100%;
      }

      .list-ul {
        margin: 0;
        padding: 10px 0;
        list-style: none;

        li {
          padding: 7px 5px;
          display: flex;
          font-size: 14px;
          cursor: pointer;
          position: relative;

          .right {
            float: right;
          }

          .user-head {
            height: 50px;
            flex: 0 0 50px;
          }

          .offline {
            position: absolute;
            display: block;
            height: 50px;
            width: 50px;
            background-color: rgba(192, 192, 192, 0.5);
          }

          .friend-right {
            padding-left: 5px;
            flex: 1 1 auto;

            .user-name {
              display: block;
              height: 30px;

              .time {
                color: #999999;
              }
            }

            .last-msg {
              display: block;
              height: 25px;
              color: #999999;

              .msg-txt {
                display: inline;
                max-width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .unread {
                font-size: 12px;
                color: white;
                display: block;
                width: 15px;
                height: 15px;
                border-radius: 10px;
                text-align: center;
                background-color: red;
              }
            }


          }

          &:hover {
            background-color: #ddd;
          }

          &.active {
            background-color: #C5C4C4;
          }
        }
      }

      .friend-list {
        background-color: rgb(236, 235, 233);
        overflow-y: auto;

        .friend-ul {
          li {
            .friend-right {
              .user-name {
                height: 50px;
                line-height: 50px;
                display: inline-block;
              }

              .icon {
                display: inline-block;
                height: 50px;
                line-height: 50px;
                padding-right: 5px;

                .nv {
                  color: red;
                  font-size: 16px;
                }

                .nan {
                  color: blue;
                  font-size: 16px;
                }
              }
            }
          }
        }
      }

      .chat-content {
        display: flex;
        flex-flow: column;
        background-color: #F5F5F5;
        position: relative;

        /*聊天窗口样式*/

        .friend-name {
          flex: 0 0 60px;
          border-bottom: 1px solid rgb(236, 235, 233);
          line-height: 60px;
          font-size: 18px;
          font-weight: bold;
          padding-left: 20px;

          .inputting {
            float: right;
            font-size: 12px;
            color: #ccc;
            padding-right: 50px;
          }
        }

        .msg-list {
          flex: 1 1 auto;
          overflow-y: auto;
          padding: 5px 15px;
          position: relative;

          .more {
            text-align: center;
            font-size: 12px;
            color: black;
          }

          .msg-ul {
            li {
              height: 40px;
              display: block;

              .user-head {
                height: 35px;
                width: 35px;
                float: left;
              }

              .msg {
                float: left;

                .msg-txt {
                  display: inline-block;
                  padding: 0px 5px;
                  margin: 0 15px 0 15px;
                  line-height: 35px;
                  max-width: 350px;
                  word-wrap: break-word;
                  background-color: #ffffff;
                }
              }

              .msg-tip {
                font-size: 10px !important;
                line-height: 35px;
                color: #ccc;
              }

              &.right {
                display: block;

                .user-head {
                  width: 35px;
                  height: 35px;
                  float: right;
                }

                .msg {
                  float: right;
                }

                .msg-tip {
                  float: right;
                }
              }

              &:hover {
                background: none;
              }
            }
          }
        }

        .send-input {
          flex: 0 0 120px;
          background-color: #ffffff;
          text-align: right;
          padding: 5px;

          .send-text {
            width: 100%;
            height: 100px;
            border: 0;
            font-size: 14px;
            resize: none;

            &:focus {
              outline: none;
            }
          }
        }

        /*朋友信息窗口样式*/

        .center-win {
          position: absolute;
          width: 300px;
          height: 300px;
          top: 50px;
          left: 50%;
          margin-left: -150px;
          text-align: center;

          .user-head {
            height: 100px;
            width: 100px;
            margin: 10px 0 5px 0;
          }

          .user-name {
            margin: 5px 0 10px 0;
          }

          .exit-btn {
            width: 150px;
          }
        }
      }
    }
  }
}